<template>
  <div class="store-header">
    <!-- 左侧轮播图 -->
    <div class="left">
      <div class="SK-slider-container">
        <div class="SK-slider-block" style="width: 900px">
          <Carousel :list="bannerList" :wid="650" :hei="350" />
        </div>
      </div>
    </div>

    <!-- 登录 -->
    <div class="right">
      <div>
        <div class="not-login">
          <img
            v-if="userInfo.page"
            :src="userInfo.page"
            style="
              border-radius: 50% 50% 50% 50%;
              width: 100px;
              height: 100px;
              margin-top: 100px;
            "
          />
          <p class="hint_4_not_login" v-show="userInfo == null">
            立即注册享受最新优惠福利
          </p>
          <p class="hint_4_not_login" v-show="userInfo != null">
            {{ userInfo.name }} 欢迎登录！
          </p>
          <div class="buttons-4not-login" v-show="userInfo == null">
            <router-link class="click_to_login" to="/login">登录</router-link
            ><router-link class="click_to_regist" to="/register"
              >注册</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pic from "../../../assets/images/default.jpeg";
import { mapState } from "vuex";
export default {
  name: "Banner",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
    };
  },

  mounted() {
    //   获取轮播图假数据
    this.$store.dispatch("getBannerList");
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (this.userInfo.page == null) {
        this.userInfo.page = pic;
      }
    },
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
};
</script>

<style>
.SK-peripheral-home .SK-peripheral-slide-content {
  margin-bottom: 30px;
}
.SK-peripheral-home .SK-peripheral-slide-content .SK-slider-container {
  width: 1200px;
  overflow: visible;
}
.SK-peripheral-home .SK-peripheral-slide-content .SK-slider-container .button {
  width: 40px;
  height: 62px;
  transform: translate(0, -65%);
  background: rgba(32, 37, 57, 0.6);
  border-radius: 4px 4px 4px 4px;
  box-sizing: border-box;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .button
  i {
  padding: 0;
  font-size: 60px;
  color: #ffffff;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .button
  i:hover {
  color: #508bf3;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .prev-button {
  left: 10px;
  padding-left: 8px;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .next-button {
  right: 10px;
  padding-left: 12px;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .SK-slider-block {
  height: 360px;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .SK-slider-block
  .SK-image-list
  .SK-slider-item {
  width: 1200px;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .SK-slider-block
  .SK-image-list
  .SK-slider-item
  a {
  display: block;
  height: 328px;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 1200px;
  border-radius: 3px;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .SK-slider-block
  .SK-page {
  bottom: -3px;
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .SK-slider-block
  .SK-page
  i {
  color: rgba(255, 255, 255, 0.1);
}
.SK-peripheral-home
  .SK-peripheral-slide-content
  .SK-slider-container
  .SK-slider-block
  .SK-page
  .active {
  color: rgba(255, 255, 255, 0.5);
}
</style>
